<div class="col-md-6 col-md-offset-3">
  <div class='panel panel-default'>
    <div class='panel-heading'>
    个人信息
    </div>
    <div class='panel-body'>
      <div class='form-group'>
        <label for='name'>用户名</label>
        <input class='form-control readonly' id='name' size='30' type='text' readonly='true' v-model="loginname"/>
      </div>
      <div class='form-group'>
        <label for='email'>电子邮件</label>
        <input class='form-control readonly' id='email' size='30' type='text' readonly='true' v-model="email"/>
      </div>
      <div class="form-group">
        <label for="avatar">头像</label>
        <div>
        <button class="btn btn-default btn-sm" id="avatar" v-on:click="uploadAvatar">上传头像</button>
        </div>
      </div>
      <div class="form-group avatar-preview">
        <img class="media-object avatar-96" v-bind:src="avatar">
        <img class="media-object avatar-48" v-bind:src="avatar">
        <img class="media-object avatar-32" v-bind:src="avatar">
        <img class="media-object avatar-16" v-bind:src="avatar">
      </div>
      <div class='form-group'>
        <label for='weixin'>微信</label>
        <input class='form-control readonly' id='weixin' size='30' type='text' v-model="weixin"/>
      </div>

      <div class='form-group'>
        <label for='qq'>QQ</label>
        <input class='form-control readonly' id='qq' size='30' type='text' v-model="qq"/>
      </div>
      <div class='form-group'>
        <label for='location'>所在地点</label>
        <input class='form-control' id='location' size='30' type='text' v-model="location"/>
      </div>
      <div class="form-group">
        <label for='signature'>个性签名</label>
        <textarea class='form-control' id='signature' name='signature' size='30' v-model="signature"></textarea>
      </div>
      <% if(typeof(csrf) !== 'undefined') {%>
      <input type='hidden' name='_csrf' value='<%= csrf %>'>
      <% } %>
      <button type="submit" class="btn btn-primary" v-on:click="updateUserInfo">更新资料</button>
    </div>
  </div>

  <div class='panel panel-default'>
    <div class='panel-heading'>
      Access Token
    </div>
    <div class='panel-body'>
      <div>
        <span>字符串：</span>
        {{accessToken}}
      </div>
      <div>
        <span>二维码：</span>
        <span id="access-token-qrcode"></span>
      </div>
    </div>
  </div>
</div>

<%- partial('../includes/editor') %>
<script type="text/javascript">
  var appId = $('[name=app-id]').val();
  var pagePrefix = '<%= apiPrefix.page %>';
  var dataPrefix = '<%= apiPrefix.data %>';
  var userId = '<%= typeof(userId) !== "undefined" && userId ? userId : ""%>';

  var vue = new Vue({
    el: '#app',
    data: {
      loginname: '',
      email: '',
      weixin: '',
      qq: '',
      avatar: '',
      location: '',
      signature: '',
      accessToken: '',
      errorMsg: '',
      successMsg: ''
    },
    methods: {
      getUser() {
        $.post(dataPrefix + '/user/' + userId + '/detail',
          {
            appId: appId,
            _csrf: $('#_csrf').val()
          },
          function(result) {
            if (result.err) {
              vue.err = result.err;
              vue.successMsg = '';
              return;
            }

            vue.loginname =  result.data.loginname;
            vue.weixin = result.data.weixin;
            vue.qq = result.data.qq;
            vue.email = result.data.email;
            vue.avatar = result.data.avatar;
            vue.location = result.data.location;
            vue.signature = result.data.signature;
            vue.accessToken = result.data.accessToken;
            new QRCode(document.getElementById("access-token-qrcode"), {
              text: vue.accessToken,
              width: 200,
              height: 200,
            });
          });
      },
      uploadAvatar() {
        var imageUpload = new ImageUpload();
        imageUpload.bind(uploadImageCallback);
      },
      updateUserInfo() {
        $.post(dataPrefix + '/user/' + userId + '/update',
          {
            appId: appId,
            _csrf: $('#_csrf').val(),
            loginname: vue.loginname,
            weixin: vue.weixin,
            qq: vue.qq,
            email: vue.email,
            avatar: vue.avatar,
            location: vue.location,
            signature: vue.signature},
            function(result) {
              if (result.err) {
                vue.errorMsg = result.err;
                vue.successMsg = '';
                return;
              }

              vue.errorMsg = '';
              vue.successMsg = result.msg;
          });
      }
    }
  });

  function uploadImageCallback(url) {
    vue.avatar = url;
  }

  if (userId) {
    vue.getUser();
  }
</script>
